<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <script th:src="@{/amcharts/amcharts.js}" type="text/javascript"></script>
    <script th:src="@{/amcharts/serial.js}" type="text/javascript"></script>
    <title th:text="#{internationalOffer.info}">internationalQuote</title>
    <script th:inline="javascript">
        $(function () {
            $("ul#tab-ul-menu-id > li").click(function(event) {
                $("ul#tab-ul-menu-id .active").removeClass("active");
                $(this).addClass("active");
                $("section.tab-content .in").removeClass("in");
                $("section.tab-content .active").removeClass("active");
                var tab = $(this).attr("tab");
                $("#" + tab).addClass("in");
                $("#" + tab).addClass("active")
            });
            $("ul#tab-ul-menu-id > li:first").click();
            queryChart();
        });//ready
        function queryChart() {
            var chartData = [
                {
                    "date": "2016-11",
                    "price": 86.0
                },
                {
                    "date": "2016-11",
                    "price": 83.0
                },
                {
                    "date": "2016-11",
                    "price": 45.0
                },
                {
                    "date": "2012-03",
                    "price": 72.0
                },
                {
                    "date": "2016-11",
                    "price": 70.0
                },
                {
                    "date": "2016-11",
                    "price": 42.0
                },
                {
                    "date": "2016-12",
                    "price": 63.0
                },
                {
                    "date": "2016-12",
                    "price": 59.0
                },
                {
                    "date": "2016-12",
                    "price": 41.0
                },
                {
                    "date": "2016-12",
                    "price": 69.0
                },
                {
                    "date": "2016-12",
                    "price": 40.0
                },
                {
                    "date": "2016-12",
                    "price": 40.5
                },
                {
                    "date": "2016-12",
                    "price": 67.0
                },
                {
                    "date": "2017-01",
                    "price": 36.5
                },
                {
                    "date": "2017-01",
                    "price": 36.0
                },
                {
                    "date": "2017-01",
                    "price": 44.0
                },
                {
                    "date": "2017-02",
                    "price": 44.0
                },
                {
                    "date": "2017-02",
                    "price": 63.0
                },
                {
                    "date": "2017-02",
                    "price": 63.5
                },
                {
                    "date": "2017-02",
                    "price": 45.5
                },
                {
                    "date": "2017-02",
                    "price": 65.5
                },
                {
                    "date": "2017-03",
                    "price": 46.0
                },
                {
                    "date": "2017-03",
                    "price": 47.0
                },
                {
                    "date": "2017-02",
                    "price": 73.0
                },
                {
                    "date": "2017-04",
                    "price": 45.0
                },
                {
                    "date": "2017-04",
                    "price": 43.0
                },
                {
                    "date": "2017-05",
                    "price": 39.0
                },
                {
                    "date": "2017-05",
                    "price": 68.0
                },
                {
                    "date": "2017-06",
                    "price": 36.5
                },
                {
                    "date": "2017-11",
                    "price": 35.19
                }
            ];
            loadChart(chartData);
        }
        function loadChart(chartData) {
            var chart;
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            var path = /*[[${#request.getContextPath()}]]*/"";
            chart.pathToImages = path + "/amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "YYYY-MM";
            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
            categoryAxis.dashLength = 1;
            categoryAxis.gridAlpha = 0.15;
            categoryAxis.axisColor = "#DADADA";
            categoryAxis.title="国际煤价成交信息表"
            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisColor = "#DADADA";
            valueAxis.dashLength = 1;
            valueAxis.logarithmic = true; // this line makes axis logarithmic
            chart.addValueAxis(valueAxis);
            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.type = "smoothedLine";
            graph.bullet = "round";
            graph.bulletColor = "#FFFFFF";
            graph.bulletBorderColor = "#00BBCC";
            graph.bulletBorderAlpha = 1;
            graph.bulletBorderThickness = 2;
            graph.bulletSize = 7;
            graph.title = "Price";
            graph.valueField = "price";
            graph.lineThickness = 2;
            graph.lineColor = "#00BBCC";
            chart.addGraph(graph);
            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorPosition = "mouse";
            chart.addChartCursor(chartCursor);
            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);
            // WRITE
            chart.write("chartdiv");
        }
    </script>
<!--原来的-->
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-72 - 44; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/8;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryInternationalQuoteInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'offerId',name : 'offerId',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{internationalOffer.date}]]*/"",name : 'offerDate',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.calorific.value}]]*/"",name : 'calorificValue',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.origin.country}]]*/"",name : 'originCountry',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.price}]]*/"",name : 'price',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.price.terms}]]*/"",name : 'priceTerms',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.number}]]*/"",name : 'number',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.delivery.port}]]*/"",name : 'deliveryPort',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{internationalOffer.shipment.time}]]*/"",name : 'shipmentTime',width : _columnWidth, sortable : true,align : 'center'},
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            query();
            $("#query-btn-id").click(function (event) {
                event.stopPropagation()
                query();
            })
        });//ready


        function query() {
            var offerDate = $("#internationalOffer-date-id").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"offerDate",value:offerDate}
                ]
            }).flexReload();
        }
    </script>
<!--原来的-->
    <style>
        body{
            background-color: #E6E6FA
        }
    </style>
</head>
<body>
<ul id="tab-ul-menu-id" class="nav nav-tabs">
    <li tab="tab-i18n-id">
        <a href="#">
            <i class="fa fa-area-chart"></i>
            <span th:text="#{internationalOffer.char}"></span>
        </a>
    </li>
    <li tab="tab-son-menu-id">
        <a href="#">
            <i class="fa fa-calendar"></i>
            <span th:text="#{internationalOffer.table}"></span>
        </a>
    </li>
</ul>
<section class="tab-content">
    <article id="tab-i18n-id" class="tab-pane fade in active">
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </article>
    <article id="tab-son-menu-id" class="tab-pane fade">
<!--原来的-->
        <nav style="display: flex;flex-direction: row;margin-left: 10px;align-items: center;margin-top: 5px;margin-bottom: 5px">
            <div sec:authorize="hasRole('ROLE_gqgy_data_quote')">
                <span th:text="#{internationalOffer.date}"></span>
                <input  style="margin-left: 10px;" id="internationalOffer-date-id">
                <a id="query-btn-id" class="navbar-btn" href="#" style="margin-left: 10px" >
                    <i class="glyphicon glyphicon-zoom-in"></i>
                    <span th:text="#{common.query}"></span>
                </a>
            </div>
        </nav>
        <table sec:authorize="hasRole('ROLE_gqgy_data_quote')" id="flexigrid-id"></table>
<!--原来的-->
    </article>
</section>
</body>
</html>



